import { Link, NavLink, useNavigate } from "react-router";
import { Button } from "antd";
/**
 * Link组件是一个用于导航到其他页面的组件，他会被渲染成一个特殊的<a>标签，跟传统a标签不同的是，他不会刷新页面，而是会通过router管理路由。
 * to：要导航到的路径
replace：是否替换当前路径
state：要传递给目标页面的状态
relative：相对于当前路径的导航方式
reloadDocument：是否重新加载页面
preventScrollReset：是否阻止滚动位置重置
viewTransition：是否启用视图过渡
 * 
 * navLink是link加强版，有状态
 * Navlink 会经过以下三个状态的转换，而Link不会，所以Navlink就是一个link的增强版。

active：激活状态(当前路由和to属性匹配)
pending：等待状态(loader有数据需要加载)
transitioning：过渡状态(通过viewTransition属性触发)


navigate跟Link组件的参数类似

第一个参数: to跳转的路由 navigate(to)
第二个参数: options配置对象 navigate(to,options)
replace: 是否替换当前路由
state: 传递的数据
relative: 相对路径
preventScrollReset: 是否阻止滚动重置
 * @returns 
 */
export default function RouteLink() {
  const navigate = useNavigate();
  return (
    <div>
      <h1>RouteLink</h1>

      <p>RouteLink</p>

      <Link to="/routeQuery" preventScrollReset>
        routeQuery
      </Link>
      <hr />
      <NavLink
        viewTransition
        style={({ isActive, isPending }) => {
          return {
            marginRight: "10px",
            color: isActive ? "red" : "blue",
            backgroundColor: isPending ? "yellow" : "transparent",
          };
        }}
        to="/home"
      >
        About
      </NavLink>

      <hr />
      <Button onClick={() => navigate("/home")}>跳转</Button>
      <Button onClick={() => navigate("/home?name=张三")}>跳转query</Button>
      <Button onClick={() => navigate("/routeParma/123")}>跳转params</Button>
      <Button onClick={() => navigate("/routeParma/123", { replace: true })}>
        跳转replace
      </Button>
      <Button
        onClick={() =>
          navigate("/routeParma/123", { preventScrollReset: true })
        }
      >
        跳转，滚动位置不变
      </Button>
      <Button onClick={() => navigate("/home", { state: { name: "张三" } })}>
        跳转state
      </Button>
    </div>
  );
}
